<!-- 生长发育，详情 -->
<template>
    <el-drawer
        :model-value="isShowDetails"
        size="800"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <template #header>
            <strong style="font-weight: bold; color: #000;">详情</strong>
        </template>
        <template #default>
            <el-form :model="form" label-width="auto" style="max-width: 800px">
                <el-form-item label="牛号">
                    <el-input v-model="form.cowCode" disabled />
                </el-form-item>
                <el-form-item label="体重（kg）">
                    <el-input v-model="form.weight" disabled />
                </el-form-item>
                <el-form-item label="体高（cm）">
                    <el-input v-model="form.height" disabled />
                </el-form-item>
                <el-form-item label="十字部高（cm）">
                    <el-input v-model="form.crossHeight" disabled />
                </el-form-item>
                <el-form-item label="体斜长（cm）">
                    <el-input v-model="form.bodyLength" disabled />
                </el-form-item>
                <el-form-item label="胸围（cm）">
                    <el-input v-model="form.chestGirth" disabled />
                </el-form-item>
                <el-form-item label="背膘厚（mm）">
                    <el-input v-model="form.backFatThickness" disabled />
                </el-form-item>
                <el-form-item label="眼肌面积（cm2）">
                    <el-input v-model="form.eyeArea" disabled />
                </el-form-item>
                <el-form-item label="测定日期">
                    <el-date-picker v-model="form.recordDate" disabled type="date" value-format="YYYY-MM-DD" style="width: 100%;" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <!-- <el-button @click="cancelHandler">取消</el-button>
                <el-button type="primary" @click="confirmHandler">保存</el-button> -->
                <el-button @click="cancelHandler">关闭</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { reactive, onUpdated } from 'vue'
import { reqGetCowGrowthInfo, reqCowGrowthUpdata } from '@/api/daily'
import { ElMessage } from 'element-plus'

// 接收父组件传递过来的值
let props = defineProps(['isShowDetails', 'detailsId'])

// 自定义事件，子传父
let $emit = defineEmits(['closeDetailsDrawer'])

// 表单收集
const form = reactive({
    cowCode: '', // 牛号
    backFatThickness: '', // 18月龄背膘厚（mm）
    bodyLength: '', // 体斜长（cm）
    chestGirth: '', // 胸围（cm）
    crossHeight: '', // 十字部高（cm）
    eyeArea: '', // 18月龄眼肌面积（cm2）
    height: '', // 体高（cm）
    recordDate: '', // 测定日期
    weight: '', // 体重（kg）
})

// 通过id获取详情
const getCowGrowthInfo = async () => {
    let res = await reqGetCowGrowthInfo({ id: props.detailsId })
    Object.assign(form, res.data)
}


// 取消按钮
const cancelHandler = () => {
    $emit('closeDetailsDrawer', false)
}

// 保存按钮
const confirmHandler = async () => {
    let res = await reqCowGrowthUpdata(form)
    console.log('保存是否成功', res)
    if(res.status == 200){
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        $emit('closeDetailsDrawer', false)
    }
}

// 组件更新
onUpdated(() => {
    getCowGrowthInfo()
})
</script>

<style scoped lang="scss"></style>